<template>
    <div>
        <video ref="videoEl" :class="'video ' + _data.classname"></video>
    </div>
</template>
  
<script setup lang="ts">
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
import "videojs-contrib-hls";
import { getCurrentInstance, nextTick, onMounted, onUnmounted, ref } from "vue";

const props = withDefaults(defineProps<{
    id: string;
}>(), {
});
const data = () => {
    return {
        player: ref(null),
        videoEl: ref(null),
        classname: `video-${props.id}`,
        options: {
            autoplay: true,
            controls: true,
            preload: "auto",
            fluid: true,
            playbackRates: [0.5, 1, 1.5, 2],
            controlBar: {
                children: [
                    "playToggle",
                    // "volumePanel",
                    // "currentTimeDisplay",
                    // "timeDivider",
                    // "durationDisplay",
                    // "progressControl",
                    // "liveDisplay",
                    // "seekToLive",
                    // "remainingTimeDisplay",
                    // "customControlSpacer",
                    // "playbackRateMenuButton",
                    // "chaptersButton",
                    // "descriptionsButton",
                    // "subsCapsButton",
                    // "audioTrackButton",
                    // "pictureInPictureToggle",
                    "fullscreenToggle",
                ],
            },
            sources: [
                {
                    src: "http://localhost:8080/hls/stream.m3u8",
                    type: "application/x-mpegURL",
                },
            ],
        }
    }
}
const _data = data();
onMounted(async () => {
    await nextTick(() => {
        _data.videoEl.value = document.querySelector(`.${_data.classname}`);
        console.log(_data.videoEl.value);

    });
    // 创建 video.js 播放器实例
    _data.player = videojs(_data.videoEl.value, _data.options);
    // // 监听播放器事件
    // _data.player.on("error", (err) => {
    //     console.log(err);
    // });
    // _data.player.on("loadeddata", () => {
    //     console.log("loadeddata");
    // });
    // _data.player.on("loadedmetadata", () => {
    //     console.log("loadedmetadata");
    // });
    // _data.player.on("canplay", () => {
    //     console.log("canplay");
    // });
    // _data.player.on("canplaythrough", () => {
    //     console.log("canplaythrough");
    // });
    // _data.player.on("waiting", () => {
    //     console.log("waiting");
    // });
});

onUnmounted(() => {
    // 销毁播放器实例
    _data.player?.dispose();
});
</script>
<style scoped lang="less">
.video {
    width: 100%;
    height: 100%;
}
</style>